<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>SCOR模型供应链驾驶舱</title>
  <script src="https://unpkg.com/@tailwindcss/browser@4"></script>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <style type="text/tailwindcss">
    /* @theme {
      --color-primary: #165DFF;
      --color-secondary: #36CFC9;
      --color-warning: #FF7D00;
      --color-danger: #F53F3F;
      --color-success: #00B42A;
      --color-purple: #722ED1;
      --font-inter: 'Inter', sans-serif;
    }

    @utility smooth-transition {
      transition: all 0.3s ease-in-out;
    }

    @utility card-hover {
      transform: translateY(-5px);
      box-shadow: 0 10px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    } */
  </style>
</head>

<body class="font-inter bg-gray-50 min-h-screen">
<div class="container mx-auto px-4 py-8">
  <!-- 头部标题 -->
  <header class="mb-8">
    <h1 class="text-[clamp(1.8rem,4vw,2.5rem)] font-bold text-gray-800">SCOR模型供应链驾驶舱</h1>
    <p class="text-gray-600 mt-2">基于计划-采购-生产-交付-退货全流程的绩效监控与分析</p>
  </header>

  <!-- 时间筛选栏 -->
  <div class="bg-white rounded-lg shadow-sm p-4 mb-6 flex flex-wrap items-center justify-between">
    <div class="flex items-center space-x-4 mb-3 md:mb-0">
      <div class="relative">
        <input type="text" placeholder="开始日期" class="pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50">
        <i class="fas fa-calendar-alt absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"></i>
      </div>
      <div class="relative">
        <input type="text" placeholder="结束日期" class="pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50">
      </div>
      <select class="px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50">
        <option>按季度</option>
        <option>按月</option>
        <option>按周</option>
      </select>
    </div>
    <button class="bg-primary text-white px-4 py-2 rounded-lg flex items-center smooth-transition hover:bg-primary/90">
      <i class="fas fa-filter mr-2"></i> 筛选
    </button>
  </div>

  <!-- 新增关键指标概览 -->
  <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
    <!-- 供应链整体绩效指标 -->
    <div class="key-indicator-card bg-white rounded-xl shadow-sm p-6 smooth-transition hover:card-hover cursor-pointer" data-indicator="overall">
      <div class="flex justify-between items-start mb-4">
        <div>
          <h3 class="text-gray-500 font-medium">供应链整体绩效</h3>
          <p class="text-2xl font-bold text-gray-800 mt-1">供应链响应时间</p>
        </div>
        <div class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center text-primary">
          <i class="fas fa-clock text-xl"></i>
        </div>
      </div>
      <div class="flex items-end justify-between">
        <div>
          <span class="text-3xl font-bold text-primary">4.2<span class="text-lg ml-1">天</span></span>
          <span class="text-success text-sm flex items-center ml-2"><i class="fas fa-arrow-down mr-1"></i> 0.3天</span>
        </div>
        <div class="w-24 h-24">
          <canvas id="overallPerformanceChart"></canvas>
        </div>
      </div>
      <div class="mt-4 text-sm text-gray-500">
        <div class="flex justify-between mb-1">
          <span>目标值</span>
          <span class="font-medium">3.5天</span>
        </div>
        <div class="w-full bg-gray-200 rounded-full h-2">
          <div class="bg-primary h-2 rounded-full" style="width: 83%"></div>
        </div>
      </div>
    </div>

    <!-- 库存管理指标 -->
    <div class="key-indicator-card bg-white rounded-xl shadow-sm p-6 smooth-transition hover:card-hover cursor-pointer" data-indicator="inventory">
      <div class="flex justify-between items-start mb-4">
        <div>
          <h3 class="text-gray-500 font-medium">库存管理</h3>
          <p class="text-2xl font-bold text-gray-800 mt-1">库存周转率</p>
        </div>
        <div class="w-12 h-12 rounded-full bg-purple/10 flex items-center justify-center text-purple">
          <i class="fas fa-cubes text-xl"></i>
        </div>
      </div>
      <div class="flex items-end justify-between">
        <div>
          <span class="text-3xl font-bold text-purple">6.8<span class="text-lg ml-1">次/年</span></span>
          <span class="text-danger text-sm flex items-center ml-2"><i class="fas fa-arrow-down mr-1"></i> 0.3次</span>
        </div>
        <div class="w-24 h-24">
          <canvas id="inventoryTurnoverChart"></canvas>
        </div>
      </div>
      <div class="mt-4 text-sm text-gray-500">
        <div class="flex justify-between mb-1">
          <span>目标值</span>
          <span class="font-medium">8次/年</span>
        </div>
        <div class="w-full bg-gray-200 rounded-full h-2">
          <div class="bg-purple h-2 rounded-full" style="width: 85%"></div>
        </div>
      </div>
    </div>

    <!-- 成本控制指标 -->
    <div class="key-indicator-card bg-white rounded-xl shadow-sm p-6 smooth-transition hover:card-hover cursor-pointer" data-indicator="cost">
      <div class="flex justify-between items-start mb-4">
        <div>
          <h3 class="text-gray-500 font-medium">成本控制</h3>
          <p class="text-2xl font-bold text-gray-800 mt-1">供应链总成本</p>
        </div>
        <div class="w-12 h-12 rounded-full bg-secondary/10 flex items-center justify-center text-secondary">
          <i class="fas fa-dollar-sign text-xl"></i>
        </div>
      </div>
      <div class="flex items-end justify-between">
        <div>
          <span class="text-3xl font-bold text-secondary">12.5<span class="text-lg ml-1">%</span></span>
          <span class="text-success text-sm flex items-center ml-2"><i class="fas fa-arrow-down mr-1"></i> 0.8%</span>
        </div>
        <div class="w-24 h-24">
          <canvas id="costControlChart"></canvas>
        </div>
      </div>
      <div class="mt-4 text-sm text-gray-500">
        <div class="flex justify-between mb-1">
          <span>目标值</span>
          <span class="font-medium">10%</span>
        </div>
        <div class="w-full bg-gray-200 rounded-full h-2">
          <div class="bg-secondary h-2 rounded-full" style="width: 80%"></div>
        </div>
      </div>
    </div>
  </div>

  <!-- SCOR核心流程看板 -->
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-6 mb-8">
    <!-- 计划流程卡片 -->
    <div class="scor-card bg-white rounded-xl shadow-sm p-6 smooth-transition hover:card-hover cursor-pointer" data-process="plan">
      <div class="flex justify-between items-start mb-4">
        <div>
          <h3 class="text-gray-500 font-medium">计划流程</h3>
          <p class="text-2xl font-bold text-gray-800 mt-1">需求预测准确率</p>
        </div>
        <div class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center text-primary">
          <i class="fas fa-project-diagram text-xl"></i>
        </div>
      </div>
      <div class="flex items-end justify-between">
        <div>
          <span class="text-3xl font-bold text-primary">87<span class="text-lg ml-1">%</span></span>
          <span class="text-success text-sm flex items-center ml-2"><i class="fas fa-arrow-up mr-1"></i> 2%</span>
        </div>
        <div class="w-24 h-24">
          <canvas id="planChart"></canvas>
        </div>
      </div>
      <div class="mt-4 text-sm text-gray-500">
        <div class="flex justify-between mb-1">
          <span>目标值</span>
          <span class="font-medium">90%</span>
        </div>
        <div class="w-full bg-gray-200 rounded-full h-2">
          <div class="bg-primary h-2 rounded-full" style="width: 87%"></div>
        </div>
      </div>
    </div>

    <!-- 采购流程卡片 -->
    <div class="scor-card bg-white rounded-xl shadow-sm p-6 smooth-transition hover:card-hover cursor-pointer" data-process="source">
      <div class="flex justify-between items-start mb-4">
        <div>
          <h3 class="text-gray-500 font-medium">采购流程</h3>
          <p class="text-2xl font-bold text-gray-800 mt-1">供应商准时交货率</p>
        </div>
        <div class="w-12 h-12 rounded-full bg-secondary/10 flex items-center justify-center text-secondary">
          <i class="fas fa-shopping-cart text-xl"></i>
        </div>
      </div>
      <div class="flex items-end justify-between">
        <div>
          <span class="text-3xl font-bold text-secondary">92<span class="text-lg ml-1">%</span></span>
          <span class="text-success text-sm flex items-center ml-2"><i class="fas fa-arrow-up mr-1"></i> 1%</span>
        </div>
        <div class="w-24 h-24">
          <canvas id="sourceChart"></canvas>
        </div>
      </div>
      <div class="mt-4 text-sm text-gray-500">
        <div class="flex justify-between mb-1">
          <span>目标值</span>
          <span class="font-medium">95%</span>
        </div>
        <div class="w-full bg-gray-200 rounded-full h-2">
          <div class="bg-secondary h-2 rounded-full" style="width: 92%"></div>
        </div>
      </div>
    </div>

    <!-- 生产流程卡片 -->
    <div class="scor-card bg-white rounded-xl shadow-sm p-6 smooth-transition hover:card-hover cursor-pointer" data-process="make">
      <div class="flex justify-between items-start mb-4">
        <div>
          <h3 class="text-gray-500 font-medium">生产流程</h3>
          <p class="text-2xl font-bold text-gray-800 mt-1">产能利用率</p>
        </div>
        <div class="w-12 h-12 rounded-full bg-warning/10 flex items-center justify-center text-warning">
          <i class="fas fa-industry text-xl"></i>
        </div>
      </div>
      <div class="flex items-end justify-between">
        <div>
          <span class="text-3xl font-bold text-warning">78<span class="text-lg ml-1">%</span></span>
          <span class="text-danger text-sm flex items-center ml-2"><i class="fas fa-arrow-down mr-1"></i> 2%</span>
        </div>
        <div class="w-24 h-24">
          <canvas id="makeChart"></canvas>
        </div>
      </div>
      <div class="mt-4 text-sm text-gray-500">
        <div class="flex justify-between mb-1">
          <span>目标值</span>
          <span class="font-medium">85%</span>
        </div>
        <div class="w-full bg-gray-200 rounded-full h-2">
          <div class="bg-warning h-2 rounded-full" style="width: 78%"></div>
        </div>
      </div>
    </div>

    <!-- 交付流程卡片 -->
    <div class="scor-card bg-white rounded-xl shadow-sm p-6 smooth-transition hover:card-hover cursor-pointer" data-process="deliver">
      <div class="flex justify-between items-start mb-4">
        <div>
          <h3 class="text-gray-500 font-medium">交付流程</h3>
          <p class="text-2xl font-bold text-gray-800 mt-1">订单准时交付率</p>
        </div>
        <div class="w-12 h-12 rounded-full bg-success/10 flex items-center justify-center text-success">
          <i class="fas fa-truck text-xl"></i>
        </div>
      </div>
      <div class="flex items-end justify-between">
        <div>
          <span class="text-3xl font-bold text-success">96<span class="text-lg ml-1">%</span></span>
          <span class="text-success text-sm flex items-center ml-2"><i class="fas fa-arrow-up mr-1"></i> 4%</span>
        </div>
        <div class="w-24 h-24">
          <canvas id="deliverChart"></canvas>
        </div>
      </div>
      <div class="mt-4 text-sm text-gray-500">
        <div class="flex justify-between mb-1">
          <span>目标值</span>
          <span class="font-medium">95%</span>
        </div>
        <div class="w-full bg-gray-200 rounded-full h-2">
          <div class="bg-success h-2 rounded-full" style="width: 96%"></div>
        </div>
      </div>
    </div>

    <!-- 退货流程卡片 -->
    <div class="scor-card bg-white rounded-xl shadow-sm p-6 smooth-transition hover:card-hover cursor-pointer" data-process="return">
      <div class="flex justify-between items-start mb-4">
        <div>
          <h3 class="text-gray-500 font-medium">退货流程</h3>
          <p class="text-2xl font-bold text-gray-800 mt-1">退货处理周期</p>
        </div>
        <div class="w-12 h-12 rounded-full bg-danger/10 flex items-center justify-center text-danger">
          <i class="fas fa-undo-alt text-xl"></i>
        </div>
      </div>
      <div class="flex items-end justify-between">
        <div>
          <span class="text-3xl font-bold text-danger">3.2<span class="text-lg ml-1">天</span></span>
          <span class="text-danger text-sm flex items-center ml-2"><i class="fas fa-arrow-up mr-1"></i> 0.5天</span>
        </div>
        <div class="w-24 h-24">
          <canvas id="returnChart"></canvas>
        </div>
      </div>
      <div class="mt-4 text-sm text-gray-500">
        <div class="flex justify-between mb-1">
          <span>目标值</span>
          <span class="font-medium">2天</span>
        </div>
        <div class="w-full bg-gray-200 rounded-full h-2">
          <div class="bg-danger h-2 rounded-full" style="width: 64%"></div>
        </div>
      </div>
    </div>
  </div>

  <!-- 需求预测分析详情卡片 -->
  <div class="bg-white rounded-xl shadow-sm p-6 mb-8">
    <div class="flex justify-between items-center mb-6">
      <h3 class="text-xl font-bold text-gray-800">需求预测分析</h3>
      <div class="flex space-x-2">
        <button class="text-primary smooth-transition hover:text-primary/80">
          <i class="fas fa-download mr-1"></i> 导出
        </button>
        <button class="text-primary smooth-transition hover:text-primary/80">
          <i class="fas fa-ellipsis-v"></i>
        </button>
      </div>
    </div>
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
      <div class="lg:col-span-2">
        <div class="bg-gray-50 p-4 rounded-lg">
          <canvas id="forecastDetailChart"></canvas>
        </div>
      </div>
      <div class="space-y-4">
        <div class="bg-gray-50 p-4 rounded-lg">
          <h4 class="text-gray-600 font-medium mb-3">预测误差分布</h4>
          <!-- <canvas id="forecastErrorChart"></canvas> -->
        </div>
        <div class="bg-gray-50 p-4 rounded-lg">
          <h4 class="text-gray-600 font-medium mb-3">预测方法效果</h4>
          <!-- <canvas id="forecastMethodChart"></canvas> -->
        </div>
      </div>
    </div>
  </div>

  <!-- 库存分析详情卡片 -->
  <div class="bg-white rounded-xl shadow-sm p-6 mb-8">
    <div class="flex justify-between items-center mb-6">
      <h3 class="text-xl font-bold text-gray-800">库存分析</h3>
      <div class="flex space-x-2">
        <button class="text-primary smooth-transition hover:text-primary/80">
          <i class="fas fa-download mr-1"></i> 导出
        </button>
        <button class="text-primary smooth-transition hover:text-primary/80">
          <i class="fas fa-ellipsis-v"></i>
        </button>
      </div>
    </div>
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
      <div class="lg:col-span-2">
        <div class="bg-gray-50 p-4 rounded-lg">
          <canvas id="inventoryTrendChart"></canvas>
        </div>
      </div>
      <div class="space-y-4">
        <div class="bg-gray-50 p-4 rounded-lg">
          <h4 class="text-gray-600 font-medium mb-3">库存构成</h4>
          <!-- <canvas id="inventoryCompositionChart"></canvas> -->
        </div>
        <div class="bg-gray-50 p-4 rounded-lg">
          <h4 class="text-gray-600 font-medium mb-3">库存健康度</h4>
          <div class="space-y-3">
            <div>
              <div class="flex justify-between text-sm mb-1">
                <span>安全库存覆盖率</span>
                <span class="font-medium">92%</span>
              </div>
              <div class="w-full bg-gray-200 rounded-full h-2">
                <div class="bg-success h-2 rounded-full" style="width: 92%"></div>
              </div>
            </div>
            <div>
              <div class="flex justify-between text-sm mb-1">
                <span>滞销库存占比</span>
                <span class="font-medium">8%</span>
              </div>
              <div class="w-full bg-gray-200 rounded-full h-2">
                <div class="bg-warning h-2 rounded-full" style="width: 8%"></div>
              </div>
            </div>
            <div>
              <div class="flex justify-between text-sm mb-1">
                <span>超期库存占比</span>
                <span class="font-medium">3%</span>
              </div>
              <div class="w-full bg-gray-200 rounded-full h-2">
                <div class="bg-danger h-2 rounded-full" style="width: 3%"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 新增供应链成本分析 -->
  <div class="bg-white rounded-xl shadow-sm p-6 mb-8">
    <div class="flex justify-between items-center mb-6">
      <h3 class="text-xl font-bold text-gray-800">供应链成本分析</h3>
      <div class="flex space-x-2">
        <button class="text-primary smooth-transition hover:text-primary/80">
          <i class="fas fa-download mr-1"></i> 导出
        </button>
        <button class="text-primary smooth-transition hover:text-primary/80">
          <i class="fas fa-ellipsis-v"></i>
        </button>
      </div>
    </div>
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
      <div class="lg:col-span-2">
        <div class="bg-gray-50 p-4 rounded-lg">
          <canvas id="costAnalysisChart"></canvas>
        </div>
      </div>
      <div class="space-y-4">
        <div class="bg-gray-50 p-4 rounded-lg">
          <h4 class="text-gray-600 font-medium mb-3">成本构成</h4>
          <!-- <canvas id="costCompositionChart"></canvas> -->
        </div>
        <div class="bg-gray-50 p-4 rounded-lg">
          <h4 class="text-gray-600 font-medium mb-3">成本趋势</h4>
          <div class="space-y-3">
            <div>
              <div class="flex justify-between text-sm mb-1">
                <span>采购成本</span>
                <span class="font-medium">45%</span>
              </div>
              <div class="w-full bg-gray-200 rounded-full h-2">
                <div class="bg-primary h-2 rounded-full" style="width: 45%"></div>
              </div>
            </div>
            <div>
              <div class="flex justify-between text-sm mb-1">
                <span>生产成本</span>
                <span class="font-medium">30%</span>
              </div>
              <div class="w-full bg-gray-200 rounded-full h-2">
                <div class="bg-secondary h-2 rounded-full" style="width: 30%"></div>
              </div>
            </div>
            <div>
              <div class="flex justify-between text-sm mb-1">
                <span>物流成本</span>
                <span class="font-medium">15%</span>
              </div>
              <div class="w-full bg-gray-200 rounded-full h-2">
                <div class="bg-warning h-2 rounded-full" style="width: 15%"></div>
              </div>
            </div>
            <div>
              <div class="flex justify-between text-sm mb-1">
                <span>管理成本</span>
                <span class="font-medium">10%</span>
              </div>
              <div class="w-full bg-gray-200 rounded-full h-2">
                <div class="bg-success h-2 rounded-full" style="width: 10%"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 穿透查询模态框 -->
  <div id="drillDownModal" class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 hidden">
    <div class="bg-white rounded-xl shadow-lg w-full max-w-4xl max-h-[90vh] overflow-auto">
      <div class="p-6 border-b">
        <div class="flex justify-between items-center">
          <h3 id="modalTitle" class="text-xl font-bold text-gray-800">计划流程详情</h3>
          <button id="closeModal" class="text-gray-400 hover:text-gray-600">
            <i class="fas fa-times text-xl"></i>
          </button>
        </div>
      </div>
      <div class="p-6" id="modalContent">
        <!-- 详情内容将通过JS动态填充 -->
      </div>
      <div class="p-6 border-t flex justify-end">
        <button id="exportData" class="bg-primary text-white px-4 py-2 rounded-lg flex items-center smooth-transition hover:bg-primary/90">
          <i class="fas fa-download mr-2"></i> 导出数据
        </button>
      </div>
    </div>
  </div>
</div>

<script>
  // 样例数据 - SCOR模型各流程KPI趋势
  const scorData = {
    // 关键指标数据
    overall: {
      name: "供应链整体绩效",
      kpi: "供应链响应时间",
      unit: "天",
      current: 4.2,
      target: 3.5,
      trend: [4.8, 4.6, 4.4, 4.3, 4.2, 4.2],
      trendLabels: ["1月", "2月", "3月", "4月", "5月", "6月"],
      detailData: [
        { component: "订单处理", time: 1.2, trend: [1.5, 1.4, 1.3, 1.2, 1.2, 1.2] },
        { component: "生产周期", time: 2.1, trend: [2.3, 2.2, 2.1, 2.1, 2.0, 2.1] },
        { component: "物流配送", time: 0.9, trend: [1.0, 1.0, 0.9, 0.9, 0.9, 0.9] }
      ]
    },
    inventory: {
      name: "库存管理",
      kpi: "库存周转率",
      unit: "次/年",
      current: 6.8,
      target: 9,
      trend: [7.2, 7.0, 6.9, 6.8, 6.7, 6.8],
      trendLabels: ["1月", "2月", "3月", "4月", "5月", "6月"],
      detailData: [
        { category: "A类物资", turnover: 12, trend: [11, 11.5, 12, 12, 11.8, 12] },
        { category: "B类物资", turnover: 8, trend: [8.2, 8.1, 8.0, 8.0, 7.9, 8] },
        { category: "C类物资", turnover: 4, trend: [4.5, 4.3, 4.1, 4.0, 3.9, 4] }
      ]
    },
    cost: {
      name: "成本控制",
      kpi: "供应链总成本",
      unit: "%",
      current: 12.5,
      target: 10,
      trend: [13.2, 13.0, 12.8, 12.6, 12.5, 12.5],
      trendLabels: ["1月", "2月", "3月", "4月", "5月", "6月"],
      detailData: [
        { type: "采购成本", percentage: 45, trend: [47, 46, 45.5, 45, 45, 45] },
        { type: "生产成本", percentage: 30, trend: [31, 30.5, 30.2, 30, 30, 30] },
        { type: "物流成本", percentage: 15, trend: [15.5, 15.2, 15.1, 15, 15, 15] },
        { type: "管理成本", percentage: 10, trend: [10.2, 10.1, 10, 10, 10, 10] }
      ]
    },
    plan: {
      name: "计划流程",
      kpi: "需求预测准确率",
      unit: "%",
      current: 87,
      target: 90,
      trend: [83, 85, 86, 87, 86, 87],
      trendLabels: ["1月", "2月", "3月", "4月", "5月", "6月"],
      detailData: [
        { product: "A系列", accuracy: 92, trend: [88, 90, 92, 91, 93, 92] },
        { product: "B系列", accuracy: 87, trend: [83, 85, 86, 87, 88, 87] },
        { product: "C系列", accuracy: 91, trend: [89, 90, 91, 92, 91, 91] }
      ],
      errorDistribution: [
        { range: "误差<5%", percentage: 60 },
        { range: "误差5-10%", percentage: 25 },
        { range: "误差10-15%", percentage: 10 },
        { range: "误差>15%", percentage: 5 }
      ],
      methodPerformance: [
        { method: "移动平均", accuracy: 82 },
        { method: "指数平滑", accuracy: 87 },
        { method: "线性回归", accuracy: 85 },
        { method: "机器学习", accuracy: 90 }
      ]
    },
    source: {
      name: "采购流程",
      kpi: "供应商准时交货率",
      unit: "%",
      current: 92,
      target: 95,
      trend: [90, 91, 92, 92, 93, 92],
      trendLabels: ["1月", "2月", "3月", "4月", "5月", "6月"],
      detailData: [
        { supplier: "供应商A", onTimeRate: 95, trend: [93, 94, 95, 95, 96, 95] },
        { supplier: "供应商B", onTimeRate: 89, trend: [87, 88, 89, 89, 90, 89] },
        { supplier: "供应商C", onTimeRate: 93, trend: [91, 92, 93, 93, 94, 93] }
      ]
    },
    make: {
      name: "生产流程",
      kpi: "产能利用率",
      unit: "%",
      current: 78,
      target: 85,
      trend: [80, 79, 78, 78, 77, 78],
      trendLabels: ["1月", "2月", "3月", "4月", "5月", "6月"],
      detailData: [
        { factory: "工厂1", utilization: 82, trend: [84, 83, 82, 82, 81, 82] },
        { factory: "工厂2", utilization: 75, trend: [76, 75, 74, 75, 74, 75] },
        { factory: "工厂3", utilization: 77, trend: [78, 77, 76, 77, 76, 77] }
      ]
    },
    deliver: {
      name: "交付流程",
      kpi: "订单准时交付率",
      unit: "%",
      current: 96,
      target: 95,
      trend: [92, 93, 94, 95, 96, 96],
      trendLabels: ["1月", "2月", "3月", "4月", "5月", "6月"],
      detailData: [
        { region: "华北", onTimeRate: 98, trend: [95, 96, 97, 98, 98, 98] },
        { region: "华东", onTimeRate: 97, trend: [93, 94, 95, 96, 97, 97] },
        { region: "华南", onTimeRate: 94, trend: [90, 91, 92, 93, 94, 94] }
      ]
    },
    return: {
      name: "退货流程",
      kpi: "退货处理周期",
      unit: "天",
      current: 3.2,
      target: 2,
      trend: [3.7, 3.5, 3.3, 3.2, 3.1, 3.2],
      trendLabels: ["1月", "2月", "3月", "4月", "5月", "6月"],
      detailData: [
        { reason: "质量问题", cycle: 2.8, trend: [3.2, 3.0, 2.9, 2.8, 2.8, 2.8] },
        { reason: "尺寸不符", cycle: 3.5, trend: [4.0, 3.8, 3.6, 3.5, 3.5, 3.5] },
        { reason: "其他原因", cycle: 3.0, trend: [3.5, 3.3, 3.2, 3.1, 3.0, 3.0] }
      ]
    }
  };

  // 初始化各流程图表
  function initCharts() {
    // 供应链整体绩效图表
    new Chart(document.getElementById('overallPerformanceChart'), {
      type: 'line',
      data: {
        labels: scorData.overall.trendLabels.slice(-3),
        datasets: [{
          data: scorData.overall.trend.slice(-3),
          borderColor: '#165DFF',
          backgroundColor: 'rgba(22, 93, 255, 0.1)',
          borderWidth: 2,
          tension: 0.3,
          fill: true
        }]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: { legend: { display: false } },
        scales: { x: { display: false }, y: { display: false } }
      }
    });

    // 库存周转率图表
    new Chart(document.getElementById('inventoryTurnoverChart'), {
      type: 'line',
      data: {
        labels: scorData.inventory.trendLabels.slice(-3),
        datasets: [{
          data: scorData.inventory.trend.slice(-3),
          borderColor: '#722ED1',
          backgroundColor: 'rgba(114, 46, 209, 0.1)',
          borderWidth: 2,
          tension: 0.3,
          fill: true
        }]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: { legend: { display: false } },
        scales: { x: { display: false }, y: { display: false } }
      }
    });

    // 成本控制图表
    new Chart(document.getElementById('costControlChart'), {
      type: 'line',
      data: {
        labels: scorData.cost.trendLabels.slice(-3),
        datasets: [{
          data: scorData.cost.trend.slice(-3),
          borderColor: '#36CFC9',
          backgroundColor: 'rgba(54, 207, 201, 0.1)',
          borderWidth: 2,
          tension: 0.3,
          fill: true
        }]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: { legend: { display: false } },
        scales: { x: { display: false }, y: { display: false } }
      }
    });

    // 计划流程图表
    new Chart(document.getElementById('planChart'), {
      type: 'line',
      data: {
        labels: scorData.plan.trendLabels.slice(-3),
        datasets: [{
          data: scorData.plan.trend.slice(-3),
          borderColor: '#165DFF',
          backgroundColor: 'rgba(22, 93, 255, 0.1)',
          borderWidth: 2,
          tension: 0.3,
          fill: true
        }]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: { legend: { display: false } },
        scales: { x: { display: false }, y: { display: false } }
      }
    });

    // 采购流程图表
    new Chart(document.getElementById('sourceChart'), {
      type: 'line',
      data: {
        labels: scorData.source.trendLabels.slice(-3),
        datasets: [{
          data: scorData.source.trend.slice(-3),
          borderColor: '#36CFC9',
          backgroundColor: 'rgba(54, 207, 201, 0.1)',
          borderWidth: 2,
          tension: 0.3,
          fill: true
        }]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: { legend: { display: false } },
        scales: { x: { display: false }, y: { display: false } }
      }
    });

    // 生产流程图表
    new Chart(document.getElementById('makeChart'), {
      type: 'line',
      data: {
        labels: scorData.make.trendLabels.slice(-3),
        datasets: [{
          data: scorData.make.trend.slice(-3),
          borderColor: '#FF7D00',
          backgroundColor: 'rgba(255, 125, 0, 0.1)',
          borderWidth: 2,
          tension: 0.3,
          fill: true
        }]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: { legend: { display: false } },
        scales: { x: { display: false }, y: { display: false } }
      }
    });

    // 交付流程图表
    new Chart(document.getElementById('deliverChart'), {
      type: 'line',
      data: {
        labels: scorData.deliver.trendLabels.slice(-3),
        datasets: [{
          data: scorData.deliver.trend.slice(-3),
          borderColor: '#00B42A',
          backgroundColor: 'rgba(0, 180, 42, 0.1)',
          borderWidth: 2,
          tension: 0.3,
          fill: true
        }]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: { legend: { display: false } },
        scales: { x: { display: false }, y: { display: false } }
      }
    });

    // 退货流程图表
    new Chart(document.getElementById('returnChart'), {
      type: 'line',
      data: {
        labels: scorData.return.trendLabels.slice(-3),
        datasets: [{
          data: scorData.return.trend.slice(-3),
          borderColor: '#F53F3F',
          backgroundColor: 'rgba(245, 63, 63, 0.1)',
          borderWidth: 2,
          tension: 0.3,
          fill: true
        }]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: { legend: { display: false } },
        scales: { x: { display: false }, y: { display: false } }
      }
    });

    // 需求预测详情图表
    new Chart(document.getElementById('forecastDetailChart'), {
      type: 'line',
      data: {
        labels: scorData.plan.trendLabels,
        datasets: [
          {
            label: '实际需求',
            data: [1200, 1350, 1400, 1500, 1480, 1600],
            borderColor: '#165DFF',
            backgroundColor: 'transparent',
            borderWidth: 2,
            tension: 0.3
          },
          {
            label: '预测需求',
            data: [1150, 1300, 1420, 1450, 1450, 1550],
            borderColor: '#FF7D00',
            backgroundColor: 'transparent',
            borderWidth: 2,
            tension: 0.3
          }
        ]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: { legend: { position: 'top' } },
        scales: {
          y: {
            beginAtZero: false,
            title: { display: true, text: '数量' }
          }
        }
      }
    });

    // 预测误差分布图表
    // new Chart(document.getElementById('forecastErrorChart'), {
    //   type: 'doughnut',
    //   data: {
    //     labels: scorData.plan.errorDistribution.map(item => item.range),
    //     datasets: [{
    //       data: scorData.plan.errorDistribution.map(item => item.percentage),
    //       backgroundColor: [
    //         '#00B42A', // 绿色
    //         '#165DFF', // 蓝色
    //         '#FF7D00', // 橙色
    //         '#F53F3F'  // 红色
    //       ],
    //       borderWidth: 0
    //     }]
    //   },
    //   options: {
    //     responsive: true,
    //     maintainAspectRatio: false,
    //     plugins: { legend: { position: 'bottom', labels: { boxWidth: 12 } } },
    //     cutout: '70%'
    //   }
    // });

    // 预测方法效果图表
    // new Chart(document.getElementById('forecastMethodChart'), {
    //   type: 'bar',
    //   data: {
    //     labels: scorData.plan.methodPerformance.map(item => item.method),
    //     datasets: [{
    //       label: '准确率(%)',
    //       data: scorData.plan.methodPerformance.map(item => item.accuracy),
    //       backgroundColor: '#165DFF',
    //       borderRadius: 4
    //     }]
    //   },
    //   options: {
    //     responsive: true,
    //     maintainAspectRatio: false,
    //     plugins: { legend: { display: false } },
    //     scales: {
    //       y: {
    //         beginAtZero: true,
    //         max: 100,
    //         ticks: { callback: function(value) { return value + '%'; } }
    //       }
    //     }
    //   }
    // });

    // 库存趋势图表
    new Chart(document.getElementById('inventoryTrendChart'), {
      type: 'line',
      data: {
        labels: scorData.inventory.trendLabels,
        datasets: [
          {
            label: '库存周转率',
            data: scorData.inventory.trend,
            borderColor: '#722ED1',
            backgroundColor: 'rgba(114, 46, 209, 0.1)',
            borderWidth: 2,
            tension: 0.3,
            fill: true,
            yAxisID: 'y'
          },
          {
            label: '库存水平',
            data: [1500, 1600, 1700, 1800, 1900, 1850],
            borderColor: '#FF7D00',
            backgroundColor: 'transparent',
            borderWidth: 2,
            tension: 0.3,
            yAxisID: 'y1'
          }
        ]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: { legend: { position: 'top' } },
        scales: {
          y: {
            beginAtZero: false,
            title: { display: true, text: '周转率(次/年)' },
            position: 'left'
          },
          y1: {
            beginAtZero: false,
            title: { display: true, text: '库存价值(万元)' },
            position: 'right',
            grid: { drawOnChartArea: false }
          }
        }
      }
    });

    // 库存构成图表
    // new Chart(document.getElementById('inventoryCompositionChart'), {
    //   type: 'doughnut',
    //   data: {
    //     labels: ['原材料', '在制品', '成品'],
    //     datasets: [{
    //       data: [35, 25, 40],
    //       backgroundColor: [
    //         '#165DFF', // 蓝色
    //         '#36CFC9', // 青色
    //         '#722ED1'  // 紫色
    //       ],
    //       borderWidth: 0
    //     }]
    //   },
    //   options: {
    //     responsive: true,
    //     maintainAspectRatio: false,
    //     plugins: { legend: { position: 'bottom', labels: { boxWidth: 12 } } },
    //     cutout: '70%'
    //   }
    // });

    // 成本分析图表
    new Chart(document.getElementById('costAnalysisChart'), {
      type: 'line',
      data: {
        labels: scorData.cost.trendLabels,
        datasets: [
          {
            label: '总成本占比',
            data: scorData.cost.trend,
            borderColor: '#36CFC9',
            backgroundColor: 'rgba(54, 207, 201, 0.1)',
            borderWidth: 2,
            tension: 0.3,
            fill: true
          }
        ]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: { legend: { position: 'top' } },
        scales: {
          y: {
            beginAtZero: false,
            title: { display: true, text: '成本占比(%)' }
          }
        }
      }
    });

    // 成本构成图表
    // new Chart(document.getElementById('costCompositionChart'), {
    //   type: 'doughnut',
    //   data: {
    //     labels: ['采购成本', '生产成本', '物流成本', '管理成本'],
    //     datasets: [{
    //       data: [45, 30, 15, 10],
    //       backgroundColor: [
    //         '#165DFF', // 蓝色
    //         '#36CFC9', // 青色
    //         '#FF7D00', // 橙色
    //         '#00B42A'  // 绿色
    //       ],
    //       borderWidth: 0
    //     }]
    //   },
    //   options: {
    //     responsive: true,
    //     maintainAspectRatio: false,
    //     plugins: { legend: { position: 'bottom', labels: { boxWidth: 12 } } },
    //     cutout: '70%'
    //   }
    // });
  }

  // 渲染穿透查询详情
  function renderDrillDownContent(processKey) {
    const processData = scorData[processKey];
    document.getElementById('modalTitle').textContent = `${processData.name} - ${processData.kpi}详情`;

    const content = document.getElementById('modalContent');
    content.innerHTML = `
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
          <div class="lg:col-span-2">
            <h4 class="text-gray-600 font-medium mb-4">趋势分析</h4>
            <div class="bg-gray-50 p-4 rounded-lg">
              <canvas id="detailTrendChart"></canvas>
            </div>
          </div>
          <div>
            <h4 class="text-gray-600 font-medium mb-4">当前状态</h4>
            <div class="bg-gray-50 p-4 rounded-lg h-full">
              <div class="flex items-end mb-2">
                <span class="text-4xl font-bold text-primary">${processData.current}${processData.unit}</span>
                <span class="${processData.current >= processData.target ? 'text-success' : 'text-danger'} text-sm flex items-center ml-2">
                  <i class="fas ${processData.current >= processData.target ? 'fa-arrow-up' : 'fa-arrow-down'} mr-1"></i>
                  ${processData.current > scorData[processKey].trend[scorData[processKey].trend.length-2] ?
            `+${processData.current.toFixed(2) - scorData[processKey].trend[scorData[processKey].trend.length-2].toFixed(2)}` :
            processData.current < scorData[processKey].trend[scorData[processKey].trend.length-2] ?
                    `${processData.current.toFixed(2) - scorData[processKey].trend[scorData[processKey].trend.length-2].toFixed(2)}` : '持平'}
                </span>
              </div>
              <div class="mt-4 text-sm text-gray-500">
                <div class="flex justify-between mb-1">
                  <span>目标值</span>
                  <span class="font-medium">${processData.target}${processData.unit}</span>
                </div>
                <div class="w-full bg-gray-200 rounded-full h-2">
                  <div class="bg-primary h-2 rounded-full" style="width: ${(processData.current / processData.target * 100).toFixed(1)}%"></div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="mb-8">
          <h4 class="text-gray-600 font-medium mb-4">细分维度分析</h4>
          <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200">
              <thead class="bg-gray-50">
                <tr>
                  <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">细分维度</th>
                  <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">当前值</th>
                  <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">趋势</th>
                </tr>
              </thead>
              <tbody class="bg-white divide-y divide-gray-200">
                ${processData.detailData ? processData.detailData.map(item => `
                  <tr class="hover:bg-gray-50 smooth-transition">
                    <td class="px-6 py-4 whitespace-nowrap font-medium text-gray-900">${item[Object.keys(item)[0]]}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                      ${Object.keys(item)[1] === 'accuracy' ? item.accuracy + '%' :
                        Object.keys(item)[1] === 'onTimeRate' ? item.onTimeRate + '%' :
                        Object.keys(item)[1] === 'utilization' ? item.utilization + '%' :
                        Object.keys(item)[1] === 'cycle' ? item.cycle + '天' :
                        Object.keys(item)[1] === 'time' ? item.time + '天' :
                        Object.keys(item)[1] === 'turnover' ? item.turnover + '次/年' :
                        Object.keys(item)[1] === 'percentage' ? item.percentage + '%' : item[Object.keys(item)[1]]}
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                      <div class="w-16 h-8">
                        <canvas id="trendChart_${Object.keys(item)[0]}_${item[Object.keys(item)[0]]}" width="64" height="32"></canvas>
                      </div>
                    </td>
                  </tr>
                `).join('') : ''}
              </tbody>
            </table>
          </div>
        </div>

        <div class="mb-8">
          <h4 class="text-gray-600 font-medium mb-4">改进建议</h4>
          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            ${processData.current >= processData.target ? `
              <div class="bg-success/10 border border-success/20 rounded-lg p-4">
                <div class="flex items-center mb-2">
                  <i class="fas fa-check-circle text-success mr-2"></i>
                  <span class="font-medium text-success">目标达成</span>
                </div>
                <p class="text-sm text-gray-600">当前指标已达到目标值，建议保持现有运营水平。</p>
              </div>
            ` : `
              <div class="bg-warning/10 border border-warning/20 rounded-lg p-4">
                <div class="flex items-center mb-2">
                  <i class="fas fa-exclamation-triangle text-warning mr-2"></i>
                  <span class="font-medium text-warning">需要改进</span>
                </div>
                <p class="text-sm text-gray-600">当前指标未达目标，建议分析根本原因并制定改进计划。</p>
              </div>
            `}
            <div class="bg-primary/10 border border-primary/20 rounded-lg p-4">
              <div class="flex items-center mb-2">
                <i class="fas fa-lightbulb text-primary mr-2"></i>
                <span class="font-medium text-primary">优化建议</span>
              </div>
              <p class="text-sm text-gray-600">基于历史数据分析，建议关注关键影响因素并持续监控。</p>
            </div>
          </div>
        </div>
    `;

    // 渲染趋势图表
    setTimeout(() => {
      // 主趋势图表
      new Chart(document.getElementById('detailTrendChart'), {
        type: 'line',
        data: {
          labels: processData.trendLabels,
          datasets: [{
            label: processData.kpi,
            data: processData.trend,
            borderColor: '#165DFF',
            backgroundColor: 'rgba(22, 93, 255, 0.1)',
            borderWidth: 2,
            tension: 0.3,
            fill: true
          }]
        },
        options: {
          responsive: true,
          maintainAspectRatio: false,
          plugins: { legend: { display: false } },
          scales: {
            y: {
              beginAtZero: false,
              title: { display: true, text: processData.unit }
            }
          }
        }
      });

      // 细分维度趋势图表
      processData.detailData.forEach(item => {
        const canvasId = `trendChart_${Object.keys(item)[0]}_${item[Object.keys(item)[0]]}`;
        const canvas = document.getElementById(canvasId);
        if (canvas) {
          new Chart(canvas, {
            type: 'line',
            data: {
              labels: ['', '', ''],
              datasets: [{
                data: item.trend.slice(-3),
                borderColor: '#165DFF',
                backgroundColor: 'transparent',
                borderWidth: 1,
                tension: 0.3,
                pointRadius: 0
              }]
            },
            options: {
              responsive: true,
              maintainAspectRatio: false,
              plugins: { legend: { display: false } },
              scales: { x: { display: false }, y: { display: false } }
            }
          });
        }
      });
    }, 100);
  }

  // 事件处理函数
  function initEventHandlers() {
    // SCOR流程卡片点击事件
    document.querySelectorAll('.scor-card').forEach(card => {
      card.addEventListener('click', function() {
        const processKey = this.getAttribute('data-process');
        if (processKey && scorData[processKey]) {
          renderDrillDownContent(processKey);
          document.getElementById('drillDownModal').classList.remove('hidden');
        }
      });
    });

    // 关键指标卡片点击事件
    document.querySelectorAll('.key-indicator-card').forEach(card => {
      card.addEventListener('click', function() {
        const indicatorKey = this.getAttribute('data-indicator');
        if (indicatorKey && scorData[indicatorKey]) {
          renderDrillDownContent(indicatorKey);
          document.getElementById('drillDownModal').classList.remove('hidden');
        }
      });
    });

    // 关闭模态框
    document.getElementById('closeModal').addEventListener('click', function() {
      document.getElementById('drillDownModal').classList.add('hidden');
    });

    // 点击模态框背景关闭
    document.getElementById('drillDownModal').addEventListener('click', function(e) {
      if (e.target === this) {
        this.classList.add('hidden');
      }
    });

    // 导出数据按钮
    document.getElementById('exportData').addEventListener('click', function() {
      alert('数据导出功能开发中...');
    });

    // 筛选按钮
    document.querySelector('button:has(.fa-filter)').addEventListener('click', function() {
      alert('筛选功能开发中...');
    });

    // 导出按钮
    document.querySelectorAll('button:has(.fa-download)').forEach(btn => {
      btn.addEventListener('click', function() {
        alert('导出功能开发中...');
      });
    });

    // 日期输入框交互
    document.querySelectorAll('input[placeholder*="日期"]').forEach(input => {
      input.addEventListener('focus', function() {
        this.type = 'date';
      });
    });
  }

  // 页面加载完成后初始化
  document.addEventListener('DOMContentLoaded', function() {
    // 初始化图表
    initCharts();
    
    // 初始化事件处理
    initEventHandlers();
    
    // 添加页面加载动画
    document.body.classList.add('loaded');
  });

  // 添加一些交互效果
  document.addEventListener('DOMContentLoaded', function() {
    // 卡片悬停效果增强
    document.querySelectorAll('.scor-card, .key-indicator-card').forEach(card => {
      card.addEventListener('mouseenter', function() {
        this.style.transform = 'translateY(-8px) scale(1.02)';
      });
      
      card.addEventListener('mouseleave', function() {
        this.style.transform = 'translateY(0) scale(1)';
      });
    });

    // 数字动画效果
    function animateNumbers() {
      document.querySelectorAll('.text-3xl').forEach(element => {
        const finalValue = element.textContent;
        const numericValue = parseFloat(finalValue.replace(/[^\d.]/g, ''));
        if (!isNaN(numericValue)) {
          let currentValue = 0;
          const increment = numericValue / 50;
          const timer = setInterval(() => {
            currentValue += increment;
            if (currentValue >= numericValue) {
              currentValue = numericValue;
              clearInterval(timer);
            }
            element.textContent = currentValue.toFixed(1) + finalValue.replace(/[\d.]/g, '');
          }, 20);
        }
      });
    }

    // 延迟执行数字动画
    setTimeout(animateNumbers, 500);
  });
</script>

<style>
  /* 页面加载动画 */
  body:not(.loaded) {
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
  }
  
  body.loaded {
    opacity: 1;
  }

  /* 卡片悬停效果 */
  .scor-card {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* 进度条动画 */
  .bg-primary.h-2,
  .bg-secondary.h-2,
  .bg-warning.h-2,
  .bg-success.h-2,
  .bg-danger.h-2,
  .bg-purple.h-2 {
    transition: width 1s ease-in-out;
    width: 0% !important;
  }

  body.loaded .bg-primary.h-2,
  body.loaded .bg-secondary.h-2,
  body.loaded .bg-warning.h-2,
  body.loaded .bg-success.h-2,
  body.loaded .bg-danger.h-2,
  body.loaded .bg-purple.h-2 {
    width: var(--progress-width) !important;
  }

  /* 模态框动画 */
  #drillDownModal {
    transition: opacity 0.3s ease-in-out;
  }

  #drillDownModal:not(.hidden) {
    animation: modalFadeIn 0.3s ease-out;
  }

  @keyframes modalFadeIn {
    from {
      opacity: 0;
      transform: scale(0.9);
    }
    to {
      opacity: 1;
      transform: scale(1);
    }
  }

  /* 响应式优化 */
  @media (max-width: 768px) {
    .container {
      padding-left: 1rem;
      padding-right: 1rem;
    }
    
    .grid-cols-1.md\\:grid-cols-3 {
      grid-template-columns: repeat(1, minmax(0, 1fr));
    }
    
    .grid-cols-1.md\\:grid-cols-2.lg\\:grid-cols-5 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (max-width: 640px) {
    .grid-cols-1.md\\:grid-cols-2.lg\\:grid-cols-5 {
      grid-template-columns: repeat(1, minmax(0, 1fr));
    }
  }
</style>
</body>
</html>
